<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>

	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录</title>
		<link rel="icon" href="images/icon.gif" type="image/x-ico">
		<link href="css/style.css" rel='stylesheet' type='text/css'/>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="iocnfont/iconfont.css">
		<link rel="stylesheet" href="css/gototop.css">
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
		<script src="js/nav.js"></script>
		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<script>
            $(function () {
                //如果当前的窗口不是顶层窗口,	就把当前窗口设置成顶层窗口
                if (window.top !== window) {
                    window.top.location = window.location;
                }

                //页面加载完毕后,将用户文本框中的内容清空
                $("#username").val("");

                //在页面加载完毕后,让用户的文本框自动获得焦点
                $("#username").focus();

                //为登录提交按钮绑定事件
                $("#submitBtn").click(function () {
                    login();
                })

                //为当前登录页窗口绑定键盘敲击事件
                $(window).keydown(function (event) {
                    if (event.keyCode === 13) {
                        login();
                    }
                })
            })


            function login() {
                //验证账号不能为空
                //取得账号密码
                //将文本中的左右空格去掉,使用$.trim(文本)
                var username = $.trim($("#username").val());
                var password = $.trim($("#password").val());

                if (username === "" || password === "") {
                    $("#msg").html("账号或密码不能为空");

                    //如果账号密码为空,则需要及时强制终止该方法
                    return false;
                }
                $.ajax({
                    url: "reader/login.do",
                    data: {
                        "username": username,
                        "password": password
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            window.location.href = "jsp/index.jsp";
                        } else {
                            $("#msg").html(data.msg);
                        }
                    }
                })
            }

		</script>

	</head>

	<body>
		<header class="ohter-banner">
			<div class="container1">
				<div class="header_top">
					<div class=logo>
						<a href="jsp/readr/index.jsp"><img src="images/logo.jpeg" width="150px" height="50px" alt=""> </a>
					</div>
				</div>
				<!-- 导航栏 -->
				<div id="nav-1">
					<ul class="nav">
						<li class="slide1"></li>
						<li class="slide2"></li>
						<li><a class="active" href="jsp/readr/index.jsp">网站首页</a></li>
						<li><a href="about.html">书库</a></li>
						<li><a href="#">作者专区</a></li>
						<li><label>
							<input type="text" placeholder="搜索框"/>
						</label></li>
						<li><a href="login-r.jsp" class="iconfont icon-denglu" title="登陆"></a></li>
						<li><a href="jsp/readr/register.jsp" class="iconfont icon-zhuce" title="注册"></a></li>

					</ul>
				</div>

			</div>
			<!-- nav和bootstrap貌似有冲突 故将bootstrap放在这里 -->
			<%--<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>--%>


		</header>

		<article class="other-content">
			<div class="container">
				<!-- bootstrap框架的侧边栏样式  -->

				<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center mt-2">
					<ul class="menu1">
						<li class="item1"><a href="#" class="">奇幻玄幻<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="jsp/sales.jsp">西方奇幻 </a></li>
								<li class="subitem2"><a href="jsp/sales.jsp">东方玄幻</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">异世大陆 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">转世重生 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">异术超能 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">上古神话</a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">武侠仙侠<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="jsp/sales.jsp">古典仙侠 </a></li>
								<li class="subitem2"><a href="jsp/sales.jsp">现代修真</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">新派武侠 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">传统武侠 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">奇幻修真 </a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">历史军事<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="jsp/sales.jsp">穿越历史</a></li>
								<li class="subitem2"><a href="jsp/sales.jsp">架空历史</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">历史专记 </a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">都市娱乐<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="jsp/sales.jsp">现实题材 </a></li>
								<li class="subitem2"><a href="jsp/sales.jsp">职场商战</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">江湖情仇 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">都市重生 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">都市异能 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">都市生活</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">青春校园</a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">悬疑灵异<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="jsp/sales.jsp">推理悬念 </a></li>
								<li class="subitem2"><a href="jsp/sales.jsp">恐怖惊悚</a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">灵异神怪 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">探险异闻 </a></li>
								<li class="subitem3"><a href="jsp/sales.jsp">神秘文化 </a></li>
							</ul>
						</li>

					</ul>
					<!--手风琴效果的侧边栏效果-->
					<script type="text/javascript">
                        $(function () {
                            var menu1_ul = $('.menu1> li > ul'),
                                menu1_a = $('.menu1 > li > a');
                            menu1_ul.hide();
                            menu1_a.click(function (e) {
                                e.preventDefault();
                                if (!$(this).hasClass('active')) {
                                    menu1_a.removeClass('active');
                                    menu1_ul.filter(':visible').slideUp('normal');
                                    $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                } else {
                                    $(this).removeClass('active');
                                    $(this).next().stop(true, true).slideUp('normal');
                                }
                            });

                        });
					</script>
					<!-- 侧边栏 -->
					<ul class="box3_list">
						<li><a href="jsp/readr/index.jsp">首页</a></li>
						<li><a href="about.html">书库</a></li>
						<li><a href="#">作者专区</a></li>
					</ul>
				</div>


				<!--登录页面 -->
				<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 center">
					<div class="dreamcrub">
						<ul class="breadcrumbs">
							<li class="home">
								<a href="jsp/readr/index.jsp" title="返回首页">首页</a>&nbsp;
								<span>&gt;</span>
							</li>
							<li class="pickup">
								登录
							</li>
						</ul>
						<ul class="previous">
							<li><a href="jsp/readr/index.jsp" title="返回首页">返回首页</a></li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="register">
						<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 login-right">
							<h3>已注册用户</h3>
							<p>如果你已有账户，请登录.</p>
							<form action="jsp/readr/index.jsp">
								<div>
									<span>用户名<label>*</label></span>
									<input name="username" type="text" placeholder="用户名" id="username">
								</div>
								<div>
									<span>密码<label>*</label></span>
									<input type="password" name="password" placeholder="密码" id="password" style="border: 1px solid #DDDBDB;outline-color:#fb4d01;width: 96%;font-size:0.8125em;padding:10px;">
								</div>
								<div class="checkbox" style="position: relative;top: 5px; left: 10px;">
									<span id="msg" style="color: red"></span>
								</div>
								<input type="button" value="登录" id="submitBtn"
									   style="background:#ff0d40;color: #FFF;font-size: 0.8em;padding: 0.7em 1.2em;transition: 0.5s all;display: inline-block;text-transform: uppercase;border:none;outline:none;">
								<a class="forgot" href="#">忘记密码?</a>
							</form>
						</div>
						<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 login-left">
							<h3>新用户</h3>
							<p>创建一个新账户</p>
							<a class="acount-btn" href="jsp/readr/register.jsp">创建账户</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>

			</div>
			<!-- 回到顶部 -->

			<button class="gototop"><span>返回顶部</span></button>
			<script src="js/gototop.js"></script>
			<!-- 初始化回到顶部的按钮 -->
			<script type="text/javascript">
                $(function () {
                    $(".gototop").gototop({
                        position: 0, //返回到页面顶部的位置
                        duration: 1250, //返回顶部平滑过渡动画的持续时间
                        visibleAt: 300, //返回顶部按钮在向下滚动多少像素时可见
                    });
                });
			</script>
		</article>
		<footer class="footer">
			<div class="container">
				<img src="images/logo.jpeg" width="100px" height="50px" alt=""/>
				<p><a href="https://www.ecut.edu.cn/">https://www.ecut.edu.cn/</a></p>
				<div class="copy">
					<p>Copyright &copy;2020 East China University of Technology. All Rights Reserved. <br>
						地址：南昌校区：江西省南昌市青山湖区蛟桥镇广兰大道418号；抚州校区：江西省抚州市学府路56号 邮编：330000 <br>
						电话：18317982215 张永康 赣ICP备xxxxxx号 <br></p>
				</div>
				<ul class="social">
					<li><a href="#"> <i class="fb"> </i> </a></li>
					<li><a href="#"> <i class="tw"> </i> </a></li>
				</ul>
			</div>
		</footer>
	</body>

</html>